<!--我发起的记录-->
<template>
  <div class="attendanceApplyCount">
    <!--头部bar开始-->
    <CommonBar :options="options"></CommonBar>
    <!--头部bar结束-->
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
        <van-list
          v-if="LeaveList.length>0"
          v-model="loading"
          :finished="finished"
          offset="10"
          finished-text="没有更多了..."
          @load="onLoad"
        >
          <ul class="attendanceApplyCount_ul">
            <li
              @click="toDetail(item.id,item.type)"
              v-for="item in LeaveList"
              :key="item.id"
              class="attendanceApplyCount_li"
            >
              <div class="cobtebt">
                <div class="cobtebtleft">
                  <van-image
                    v-if="item.avatar"
                    round
                    width="45px"
                    height="45px"
                    :src="`http://www.kdehw.com:83/uploads/images/user/${item.avatar}`"
                    fit="cover"
                    class="kaoqintx"
                  />
                  <p class="txphoto" v-else>{{substringname(item.name)}}</p>
                  <div class="cintent">
                    <p class="title">{{item.name}}提交的{{showType(item.type)}}</p>
                    <p class="type" v-if="item.type==1">
                      <span>请假类型:</span>
                      {{item.form_data.type}}
                    </p>
                    <p class="type" v-if="item.type==1 ||item.type==2||item.type==3 ">
                      <span>开始时间:</span>
                      {{item.form_data.start_date}}
                    </p>
                    <p class="type" v-if="item.type==1 ||item.type==2||item.type==3 ">
                      <span>结束时间:</span>
                      {{item.form_data.end_date}}
                    </p>
                    <p class="type" v-if="item.type==8">
                      <span>发放工资金额:</span>
                      {{item.form_data.money}}元
                    </p>
                    <p class="type" v-if="item.type==8">
                      <span>发放工资日期:</span>
                      {{item.form_data.payment_date}}
                    </p>
                    <p class="type" v-if="item.type==7">
                      <span>申请金额:</span>
                      {{item.form_data.money}}元
                    </p>
                    <p class="type" v-if="item.type==7">
                      <span>付款日期:</span>
                      {{item.form_data.payment_date}}
                    </p>
                    <p class="type" v-if="item.type==6">
                      <span>招待金额:</span>
                      {{item.form_data.money}}元
                    </p>
                    <p class="type" v-if="item.type==6">
                      <span>招待日期:</span>
                      {{item.form_data.expect_date}}
                    </p>

                    <p class="type" v-if="item.type==5">
                      <span>交付日期:</span>
                      {{item.form_data.expect_date}}
                    </p>
                    <p class="type" v-if="item.type==4">
                      <span>申请金额:</span>
                      {{item.form_data.money}}元
                    </p>
                    <p class="type" v-if="item.type==4">
                      <span>付款日期:</span>
                      {{item.form_data.payment_date}}
                    </p>
                    <p class="status status3" v-if="item.status==1">等待审批</p>
                    <p class="status status3" v-if="item.status==2">等待审批</p>
                    <p class="status" v-if="item.status==3">已完成</p>
                    <p class="status" v-if="item.status==4">已撤销</p>
                    <p class="status status1" v-if="item.status==5">审批通过</p>
                    <p class="status status2" v-if="item.status==6">审批拒绝</p>
                  </div>
                </div>
                <div class="cobtebtright">{{(item.create_date).split(' ')[0]}}</div>
              </div>
            </li>
          </ul>
        </van-list>
        <div class="noData" v-else>
          <van-image width="163px" height="120px" fit="contain" :src="nochekData" />
          <p>暂无数据 ！</p>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import CommonBar from "../common/commonBar";
import { mapState } from "vuex";
export default {
  components: {
    CommonBar
  },
  computed: {
    ...mapState({
      userid: state => state.userData.id,
      token: state => state.Authorization
    })
  },
  data() {
    return {
      nochekData: require("../../../static/image/nochekData.png"),
      options: {
        type: "icon",
        centerText: "审批记录",
        iconNname: "wap-home",
        lefttype: "left"
      },
      LeaveList: [],
      loading: false,
      finished: false,
      pageSize: 10,
      pageNumber: 1,
      //下拉刷新
      refreshing: false
    };
  },
  created() {
    this.GetLeaveList();
  },
  methods: {
    //取头像
       substringname(username) {
      if (username) {
        if (username.length >= 3) {
          return username.substr(username.length - 2, 2);
        } else {
          return username;
        }
      }
    },
    showType(type) {
      var centerText = "";
      if (type == 1) {
        centerText = "请假申请";
      } else if (type == 2) {
        centerText = "出差申请";
      } else if (type == 3) {
        centerText = "车辆维修申请";
      } else if (type == 4) {
        centerText = "费用审批申请";
      } else if (type == 5) {
        centerText = "物资采购申请";
      } else if (type == 6) {
        centerText = "公务招待申请";
      } else if (type == 7) {
        centerText = "请款申请";
      } else if (type == 8) {
        centerText = "工资发放申请";
      }

      return centerText;
    },
    //下拉刷新
    onRefresh() {
      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.LeaveList = [];
      this.GetLeaveList();
    },
    //上拉加载
    onLoad() {
      this.loading = true;
      this.pageNumber++;
      this.GetLeaveList();
    },
    GetLeaveList() {
      var params = {
        token: this.token,
        uid: this.userid,
        pageNumber: this.pageNumber
      };
      this.$toast.loading({
        mask: true,
        message: "加载中...",
        duration: 5000
      });
      this.$http
        .get(`${this.$basePath}?service=App.Leave.GetLeaveList&api=89`, {
          params: params
        })
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.refreshing = false;
            //console.log("请假列表", res);

            this.LeaveList = this.LeaveList.concat(res.data.list);

            if (this.LeaveList.length >= res.data.total) {
              this.finished = true;
            }
            this.loading = false;
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    toDetail(id, type) {
      this.$router.push({
        //核心语句
        path: "/attendanceApplyPass", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          id,
          type
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/approve";
/deep/ .van-pull-refresh {
  min-height: calc(100% - 53px);
}
.txphoto {
  width: 45px;
  height: 45px;
  background: rgba(10, 213, 145, 1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin: 0 10px 0 0;
}
</style>